<template>
  <div class="wrapper" v-loading="loading">
    <p class="wrapper__welcome">灵修后台管理系统</p>
    <div class="wrapper__input">
      <label>账号</label>
      <input
          class="wrapper__input__content"
          placeholder="用户名"
          v-model="dataForm.username"
      />
    </div>
    <div class="wrapper__input">
      <label>密码</label>
      <div class="pwd__input__box">
        <input
            :type="isOpen?'text':'password'"
            class="wrapper__input__content"
            placeholder="请输入密码"
            v-model="dataForm.password"
            autocomplete="new-password"
        />
      </div>

    </div>
    <div class="wrapper__login-button" @click="handleLogin">登录</div>
  </div>
</template>

<script>
import Vue from "vue";
import { request } from '../../../assets/js/utils/request';
import { Switch,Toast } from 'vant';
import {enterHandler} from "@/assets/js/utils/validate";
Vue.use(Switch);
Vue.use(Toast);
import store from "@/store/"
import axios from "axios";

export default {
  name: 'Login',
  created() {
    enterHandler(this.handleLogin) ;
  },
  data(){
    return{
      loading:false,
      isOpen:false,
      dataForm:{
        username: '',
        password: ''
      },
      pInit:false //密码是否过于简单 true简单 false不简单
    }
  },
  methods:{
    handleLogin(){
      if(this.dataForm.username.match(/^\s*$/)){
        Toast("请输入用户名");
        return;
      }
      if(this.dataForm.password.match(/^\s*$/)){
        Toast("请输入密码");
        return;
      }
      const params = new URLSearchParams({
        username: this.dataForm.username,
        password: this.dataForm.password
      });
      this.loading = false ;
      axios.post('rest/auth', params).then(res=>{
        console.log("res:",res)
          if (res.data.code == 200){
            localStorage.isLogin = true;
            localStorage.token = res.token;
            store.commit("SET_PSWD",this.dataForm.password)
            this.$router.push({name: 'home'})
          }else {
            Toast(res.data.msg)
          }
          this.loading = false ;
      }).catch(err=>{
        this.loading = false ;
      });
    }
  },
  beforeDestroy() {

  }
}
</script>

<style lang="scss" scoped>
.pwd__input__box{position: relative;}
.switch-wrap{position: absolute;right:0;bottom: 6px}
.wrapper {
  position: absolute;
  top: 40%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  &__welcome{
    display: block;
    padding-left: .4rem;
    font-size: .32rem;
    font-weight: 400;
    margin-bottom: .5rem;
  }
  &__input {
    margin: 0 .4rem .2rem 0rem;
    padding: 0 .16rem 0 .4rem;
    font-size: .16rem;
    &__content {
      line-height: .48rem;
      border: none;
      outline: none;
      width: 100%;
      background: none;
      font-size: .16rem;
      margin-top: .1rem;
      border-bottom: 1px solid #ccc;
      color: #777;
      padding-right: 0.5rem;
      box-sizing: border-box;
      &::placeholder {
        color: #777;
      }
    }
  }
  &__login-button {
    margin: .82rem .4rem .16rem .4rem;
    line-height: .48rem;
    background: #3c93da;
    box-shadow: 0 .04rem .08rem 0 rgba(0,145,255,0.32);
    border-radius: 30px;
    color: #fff;
    font-size: .16rem;
    text-align: center;
  }
}
</style>
